<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <script>
    	if(localStorage.getItem("language") == "zh_cn"){
    		document.write("<script type='text/javascript' src='js/zh_cn.js'><\/script>");
    	}else if(localStorage.getItem("language") == "zh_tw"){
    		document.write("<script type='text/javascript' src='js/zh_tw.js'><\/script>");
    	}else{
    		document.write("<script type='text/javascript' src='js/en.js'><\/script>");
    	}
    </script>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
		*{margin: 0px;padding: 0px;font-size: 12px;}
		#tab table{width: 100%;padding: 0px;margin:0px;border-spacing:0px;border: 1px solid #ccc;border-radius: 4px;}
		#tab table th,table td{text-align: center;border: 1px solid #ccc;}
		#tab table tr:nth-child(even){
			background: #f5f5f5;
		}
		#tab thead tr{height: 30px;}
		button{min-width: 64px;line-height: 20px;margin: 0px 10px;border-radius: 4px;color: #333;border: 1px solid #ccc;background-color: #fff;cursor: pointer;padding: 2px 7px 2px;color: #fff;background-color: #337ab7;border-color: #2e6da4;}
    	#tab table img{width: 30px;}
    	.k-overlay{
    		position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 100;
		    width: 100%;
		    height: 100%;
		    background-color: #000;
		    filter: alpha(opacity=50);
		    display: none;
		    opacity: 0.5;
		}
		.content{
		    display: none;
		    justify-content: center;
		    width: 100%;
		    height: 100%;
		    position: fixed;
		    top: 0;
		    left: 0;
		    align-items: center;
		    z-index: 102
		}
		.content table{border: 1px solid #ccc;border-radius: 4px;background: #fff;}
		.content table tr{line-height: 50px;}
		.content table tr td{text-align: left;border: 0px;margin-left: 10px;padding: 0px 20px;}
		.content input{padding: 5px;margin: 0px 0px 0px 0px;border-radius: 4px;border:1px solid #ccc;}
		.content thead tr td{border-bottom: 1px solid #ccc;}
    </style>
    <script type="text/javascript">

    	function add(){
    		$(".k-overlay,.content").css("display","flex");
    	}
    </script>
</head>
<body>
	<div id="tab" style="width: 98%;padding: 1%;">
		<table>
			<thead>
				<tr>
					<td colspan="4" style="text-align:left;line-height: 40px;border-right: 0px;font-weight: bold;padding-left: 30px;"><script>document.write(language.Contractor)</script><input type="text" placeholder="search" style="padding: 5px;margin-left: 20px;border-radius: 4px;border:1px solid #ccc;" /></td>
					
					<td colspan="4" style="text-align:right;line-height: 40px;border-left: 0px;"><!-- <button onclick="add()">增加</button> --></td>
				</tr>
				<tr style="background: #f5f5f5;">
					<th style="width: 5%;"><script>document.write(language.order_number)</script></th>
					<th style="width: 10%;"><script>document.write(language.Contractor)</script></th>
					<th style="width: 10%;"><script>document.write(language.Person_in_charge)</script></th>
					<th style="width: 10%;"><script>document.write(language.telphone)</script></th>
					<th style="width: 10%;"><script>document.write(language.id_type)</script></th>
					<th style="width: 15%;"><script>document.write(language.id_number)</script></th>
					<th style="width: 15%;"><script>document.write(language.project)</script></th>
					<th style="width: 10%;"><script>document.write(language.operation)</script></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>ABC Electric Company</td>
					<td>Zhangerdai</td>
					<td>13666666666</td>
					<td>ID</td>
					<td>A8086***</td>
					<td>data base</td>
					<td><button style=' '>detailed information</button></td>
				</tr>
				<tr>
					<td>2</td>
					<td>Zhongcheng information company</td>
					<td>Yanxilin</td>
					<td>15901421254</td>
					<td>ID</td>
					<td>A8086***</td>
					<td>data base</td>
					<td><button style=' '>detailed information</button></td>
				</tr>
				<tr>
					<td>3</td>
					<td>Times network company</td>
					<td>Li</td>
					<td>13165266686</td>
					<td>ID</td>
					<td>A8086***</td>
					<td>data base</td>
					<td><button style=' '>detailed information</button></td>
				</tr>
				<tr>
					<td>4</td>
					<td>Self creation Technology Co., Ltd.</td>
					<td>Wang Kai</td>
					<td>13159874832</td>
					<td>ID</td>
					<td>A8086***</td>
					<td>data base</td>
					<td><button style=' '>detailed information</button></td>
				</tr>
				<tr>
					<td>5</td>
					<td>YASUMICHI Design Co. Ltd.</td>
					<td>Zhao money</td>
					<td>18666237789</td>
					<td>ID</td>
					<td>A8086***</td>
					<td>data base</td>
					<td><button style=' '>detailed information</button></td>
				</tr>
			</tbody>
			
		</table>
	</div>

	<div class="k-overlay"></div>

	<div class="content">
		<table style="border-spacing:0px;">
			<thead>
				<tr>
					<td colspan="2" style="text-align:left;line-height: 40px;font-weight: bold;padding-left: 30px;">New contractors</td>
					<td colspan="2" style="text-align:right;line-height: 40px;"><button onclick='$(".k-overlay,.content").css("display","none");' style="border:0px;margin:0px;">X</button></td>
				</tr>
			</thead>
			<tbody>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
				<tr>
                	<td>Contractor:</td><td><input type="text" placeholder="Please input the contractor" /></td>
                	<td>Person in charge:</td><td><input type="text" placeholder="Please input the person in charge" /></td>
            	</tr>
				<tr>
                	<td>ID Type:</td><td><select style="width: 150px;height: 30px;"><option>ID</option></select></td>
                	<td>CAAC Certificate No:</td><td><input type="text" placeholder="Please enter the document number" /></td>
                </tr>
				<tr>
                	<td>Mobile phone:</td><td><input type="text" placeholder="Please input the mobile phone" /></td>
                	<td>time:</td><td><input type="data" value="2017-10-24" /></td>
                </tr>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
			</tbody>
			<tfoot>
                <tr style="line-height: 10px;"><td style="border-top: 1px solid #ccc;" colspan="4">&nbsp;</td></tr>
				<tr>
					<td></td>
					<td colspan="3" style="text-align: right;">
						<button onclick='$(".k-overlay,.content").css("display","none");'>cancel</button>
						<button onclick='$(".k-overlay,.content").css("display","none");'>Preservation</button>
					</td>
				</tr>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
			</tfoot>
		</table>
	</div>
</body>
</html>